@extends('admin.base')

@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" id="create"> 添加 </button>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>

            <script type="text/html" id="options">
                @{{# if(d.lv !=1 ){ }}
                <a class="layui-btn layui-btn-sm"  lay-event="add">添加子菜单</a>
                @{{# } }}
                <a class="layui-btn layui-btn-sm"  lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>
            </script>
            <script id="sortTpl" type="text/html">
                <span class="layui-badge layui-bg-cyan">@{{d.sort}}</span>
            </script>
        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.use(['layer','treeGrid','form'],function () {
            let layer = layui.layer;
            let form = layui.form;
            let treeGrid = layui.treeGrid;

            treeGrid.render({
                id: 'd',
                elem:'#dataTable',
                url: "/admin/api/brands",
                cellMinWidth: 100,
                idField: 'id',//必須字段
                treeId: 'id',//树形id字段名称
                treeUpId: 'parent_id',//树形父id字段名称
                treeShowName: 'name',//以树形式显示的字段
                heightRemove: [".dHead", 10],//不计算的高度,表格设定的是固定高度，此项不生效
                isFilter: false,
                iconOpen: false, //是否显示图标【默认显示】
                isOpenDefault:true,
                loading: true,
                method: 'get',
                isPage: false,
                cols: [[
                    {field: 'name', title: '名称'},
                    {field: 'sort', title: '排序',templet:'#sortTpl'},
                    {fixed: 'right', width: 210,title:'操作', align:'center', toolbar: '#options'}
                ]]
            });

            //监听工具条
            treeGrid.on('tool(dataTable)', function(obj){
                let data = obj.data;
                let layEvent = obj.event;

                if(layEvent === 'add'){
                    create(data.id);
                }else if(layEvent === 'del'){
                    del(data.id,obj);
                }else if (layEvent === 'edit') {
                    edit(data.id);
                }
            });

            $('#create').click(function () {
                create(0);
            });

            let del = function(id,obj) {
                layer.confirm('请确认是否删除菜单',{icon: 3, title:'确认操作'},function (index) {
                    $.ajax({
                        type:"POST",
                        url:"/admin/api/brand/"+id,
                        data:{_method:"delete"},
                        dataType:"json",
                        success: function(response){
                            if (response.code === 0){
                                layer.msg(response.message,{icon:1});
                                obj.del();
                            }else{
                                layer.msg(response.message,{icon:6});
                            }
                        }
                    });
                    layer.close(index);
                });

            };

            let create = function (pid) {
                layer.open({
                    title:'添加品牌信息',
                    type:2,
                    area:['400px','350px'],
                    content:'/admin/'+pid+'/brand'
                });
            };

            let edit = function (id) {
                layer.open({
                    title:'修改品牌信息',
                    type:2,
                    area:['400px','350px'],
                    content:'/admin/brand/'+id
                });
            };
        })
    </script>
@endsection



